<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon students">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalStudents }}</div>
              <div class="stat-label">总学员数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon courses">
              <el-icon><Reading /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalCourses }}</div>
              <div class="stat-label">总课程数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalOrders }}</div>
              <div class="stat-label">总订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon revenue">
              <el-icon><Money /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">¥{{ stats.totalRevenue }}</div>
              <div class="stat-label">总收入</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>月度业绩趋势</span>
            </div>
          </template>
          <div ref="salesChart" class="chart-container"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>学员来源分布</span>
            </div>
          </template>
          <div ref="sourceChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近活动 -->
    <el-row :gutter="20" class="activity-row">
      <el-col :span="24">
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const stats = ref({
  totalStudents: 1256,
  totalCourses: 24,
  totalOrders: 892,
  totalRevenue: '1,234,567'
})

const recentActivities = ref([
  {
    id: 1,
    content: '新学员张三报名了Python基础课程',
    time: '2024-01-15 14:30',
    type: 'primary'
  },
  {
    id: 2,
    content: '李四完成了Java进阶课程的学习',
    time: '2024-01-15 10:20',
    type: 'success'
  },
  {
    id: 3,
    content: '王五申请了退款，金额：¥2,800',
    time: '2024-01-14 16:45',
    type: 'warning'
  },
  {
    id: 4,
    content: '赵六续费了前端开发课程',
    time: '2024-01-14 09:15',
    type: 'primary'
  }
])

const salesChart = ref<HTMLElement>()
const sourceChart = ref<HTMLElement>()

onMounted(() => {
  initCharts()
})

const initCharts = () => {
  // 业绩趋势图
  if (salesChart.value) {
    const salesChartInstance = echarts.init(salesChart.value)
    const salesOption = {
      title: {
        text: '月度业绩',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120000, 150000, 180000, 160000, 200000, 220000],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#409eff'
        }
      }]
    }
    salesChartInstance.setOption(salesOption)
  }
  
  // 学员来源分布图
  if (sourceChart.value) {
    const sourceChartInstance = echarts.init(sourceChart.value)
    const sourceOption = {
      title: {
        text: '学员来源',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [{
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '抖音' },
          { value: 310, name: '微信' },
          { value: 234, name: '百度' },
          { value: 135, name: '朋友推荐' },
          { value: 118, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    }
    sourceChartInstance.setOption(sourceOption)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .stats-row {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          font-size: 24px;
          color: white;
          
          &.students {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.courses {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
          
          &.orders {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.revenue {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
        
        .stat-info {
          .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }
  
  .charts-row {
    margin-bottom: 20px;
    
    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .activity-row {
    .activity-card {
      .card-header {
        font-weight: bold;
        color: #303133;
      }
    }
  }
}
</style>
